<template>
    <s-box title="热词发展趋势" :span="6" :rows="2">
        <div class="chart-wrap" ref="chart"></div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
        years:[],
        legends:[],
        series:[],
        data2
    }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
         // 解除事件绑定
         delegate.$off('s-resize',this._initChart)
         delegate.$off('s-search',this._serach)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._serach)
            delegate.$on('s-resize',this._initChart)
        },
        _serach(){

        },
        _getkHotwordDevelopTrends(){
            if(!this.navCurrentId) return;
                    this.legends = [];
                    this.series = [];
                    this.year = [];
                    this.api({
                            url: "newtechanalyse/hotWordDevelopmentTrend",
                            method: "post",
                            data:`topicId=${this.navCurrentId}`
                    }).then(data => {
                        console.log(data);
                        this.years=data.years;
                        let $this = this;
                        Object.keys(data.hotwordNums).forEach(function(key){
                            let legendobj =  {
                                    name:key,
                                    icon: 'roundRect',
                                    textStyle: {
                                        color: '#98caec'
                                    }
                                };
                            let serieobj = {  
                                    name:key,
                                    data: data.hotwordNums[key],
                                    type: "line",
                                    itemStyle: {
                                    },
                                    lineStyle: {
                                    }
                                };
                            $this.legends.push(legendobj);
                            $this.series.push(serieobj);
                            //console.log(key,data.hotwordNums[key]);
                            //console.log($this.legends)
                        });
                        this._setChartOption();
                    })
        },
        _setChartOption(){
            let myChart = echarts.init(this.$refs.chart);
                myChart.clear();
                myChart.setOption({
                legend:{
                    top: '6%',
                    left:0,
                    data:this.legends,
                },
                color:['#f59f00','#00a8ff', '#fe01fd','#165fc5','#01e704'],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0%",
                    right: "4%",
                    top: "24%",
                    bottom: "5%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: this.years,
                    interval: 10,
                    axisTick: {
                    show: true,
                    alignWithLabel: true
                    },
                    splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "#98caec" //分割线颜色
                    }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#026b95", //坐标轴线颜色
                            width: 1
                        }
                    },
                    axisLabel: {
                    color: "#98caec" //坐标轴名称颜色
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#054e76" //分割线颜色
                        }
                    },
                    axisLine: {
                        show:true,
                        lineStyle: {
                            color: "#026b95", //坐标轴线颜色
                            width: 1,
                        }
                    },
                    axisLabel: {
                    color: "#a1d6f8" //坐标轴名称颜色
                    }
                },
                series: this.series
                });
        },
        _initChart() {
            this._getkHotwordDevelopTrends();
        }
    },
}
</script>
<style lang="scss" scoped>
  .chart-wrap{
      width: 100%;
      height: 379px;
  }
</style>
